
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-pr-logo"></i>
                    <div class="name">pr-logo</div>
                    <div class="fontclass">.icon-pr-logo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-area"></i>
                    <div class="name">area</div>
                    <div class="fontclass">.icon-area</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-thermal-po-plant"></i>
                    <div class="name">thermal-po-plant</div>
                    <div class="fontclass">.icon-thermal-po-plant</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-flow"></i>
                    <div class="name">flow</div>
                    <div class="fontclass">.icon-flow</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-emit"></i>
                    <div class="name">emit</div>
                    <div class="fontclass">.icon-emit</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-reply"></i>
                    <div class="name">reply</div>
                    <div class="fontclass">.icon-reply</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-defect"></i>
                    <div class="name">defect</div>
                    <div class="fontclass">.icon-defect</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-statistical"></i>
                    <div class="name">statistical</div>
                    <div class="fontclass">.icon-statistical</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-generate"></i>
                    <div class="name">generate</div>
                    <div class="fontclass">.icon-generate</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ac-check"></i>
                    <div class="name">ac-check</div>
                    <div class="fontclass">.icon-ac-check</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-verification"></i>
                    <div class="name">verification</div>
                    <div class="fontclass">.icon-verification</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-apply"></i>
                    <div class="name">apply</div>
                    <div class="fontclass">.icon-apply</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fu-check"></i>
                    <div class="name">fu-check</div>
                    <div class="fontclass">.icon-fu-check</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-admin"></i>
                    <div class="name">admin</div>
                    <div class="fontclass">.icon-admin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-com-debug"></i>
                    <div class="name">com-debug</div>
                    <div class="fontclass">.icon-com-debug</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-com-adjust"></i>
                    <div class="name">com-adjust</div>
                    <div class="fontclass">.icon-com-adjust</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-com-signal"></i>
                    <div class="name">com-signal</div>
                    <div class="fontclass">.icon-com-signal</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-com-test"></i>
                    <div class="name">com-test</div>
                    <div class="fontclass">.icon-com-test</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-reload"></i>
                    <div class="name">reload</div>
                    <div class="fontclass">.icon-reload</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-addfolder"></i>
                    <div class="name">addfolder</div>
                    <div class="fontclass">.icon-addfolder</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-folderopen"></i>
                    <div class="name">folderopen</div>
                    <div class="fontclass">.icon-folderopen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-folder"></i>
                    <div class="name">folder</div>
                    <div class="fontclass">.icon-folder</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-add"></i>
                    <div class="name">add</div>
                    <div class="fontclass">.icon-add</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-edit"></i>
                    <div class="name">edit</div>
                    <div class="fontclass">.icon-edit</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-save"></i>
                    <div class="name">save</div>
                    <div class="fontclass">.icon-save</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-remove"></i>
                    <div class="name">remove</div>
                    <div class="fontclass">.icon-remove</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-close"></i>
                    <div class="name">close</div>
                    <div class="fontclass">.icon-close</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ok"></i>
                    <div class="name">ok</div>
                    <div class="fontclass">.icon-ok</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cut"></i>
                    <div class="name">cut</div>
                    <div class="fontclass">.icon-cut</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-search"></i>
                    <div class="name">search</div>
                    <div class="fontclass">.icon-search</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-help"></i>
                    <div class="name">help</div>
                    <div class="fontclass">.icon-help</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-no"></i>
                    <div class="name">no</div>
                    <div class="fontclass">.icon-no</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-print"></i>
                    <div class="name">print</div>
                    <div class="fontclass">.icon-print</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-addnew"></i>
                    <div class="name">addnew</div>
                    <div class="fontclass">.icon-addnew</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-new"></i>
                    <div class="name">new</div>
                    <div class="fontclass">.icon-new</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-undo"></i>
                    <div class="name">undo</div>
                    <div class="fontclass">.icon-undo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-redo"></i>
                    <div class="name">redo</div>
                    <div class="fontclass">.icon-redo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cancel"></i>
                    <div class="name">cancel</div>
                    <div class="fontclass">.icon-cancel</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-redo1"></i>
                    <div class="name">redo</div>
                    <div class="fontclass">.icon-redo1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-date"></i>
                    <div class="name">date</div>
                    <div class="fontclass">.icon-date</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tip"></i>
                    <div class="name">tip</div>
                    <div class="fontclass">.icon-tip</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-undo1"></i>
                    <div class="name">undo</div>
                    <div class="fontclass">.icon-undo1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zoomin"></i>
                    <div class="name">zoomin</div>
                    <div class="fontclass">.icon-zoomin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zoomout"></i>
                    <div class="name">zoomout</div>
                    <div class="fontclass">.icon-zoomout</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-downgrade"></i>
                    <div class="name">downgrade</div>
                    <div class="fontclass">.icon-downgrade</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-user"></i>
                    <div class="name">user</div>
                    <div class="fontclass">.icon-user</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-upgrade"></i>
                    <div class="name">upgrade</div>
                    <div class="fontclass">.icon-upgrade</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-upload"></i>
                    <div class="name">upload</div>
                    <div class="fontclass">.icon-upload</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-download"></i>
                    <div class="name">download</div>
                    <div class="fontclass">.icon-download</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-filter"></i>
                    <div class="name">filter</div>
                    <div class="fontclass">.icon-filter</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-expand"></i>
                    <div class="name">expand</div>
                    <div class="fontclass">.icon-expand</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-collapse"></i>
                    <div class="name">collapse</div>
                    <div class="fontclass">.icon-collapse</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sort"></i>
                    <div class="name">sort</div>
                    <div class="fontclass">.icon-sort</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-find"></i>
                    <div class="name">find</div>
                    <div class="fontclass">.icon-find</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-node"></i>
                    <div class="name">node</div>
                    <div class="fontclass">.icon-node</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wait"></i>
                    <div class="name">wait</div>
                    <div class="fontclass">.icon-wait</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-split"></i>
                    <div class="name">split</div>
                    <div class="fontclass">.icon-split</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lock"></i>
                    <div class="name">lock</div>
                    <div class="fontclass">.icon-lock</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-unlock"></i>
                    <div class="name">unlock</div>
                    <div class="fontclass">.icon-unlock</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-goto"></i>
                    <div class="name">goto</div>
                    <div class="fontclass">.icon-goto</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-po-plant"></i>
                    <div class="name">po-plant</div>
                    <div class="fontclass">.icon-po-plant</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-eliminate"></i>
                    <div class="name">eliminate</div>
                    <div class="fontclass">.icon-eliminate</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ed-file"></i>
                    <div class="name">ed-file</div>
                    <div class="fontclass">.icon-ed-file</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pv-power"></i>
                    <div class="name">pv-power</div>
                    <div class="fontclass">.icon-pv-power</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-po-line"></i>
                    <div class="name">po-line</div>
                    <div class="fontclass">.icon-po-line</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-com-stencil"></i>
                    <div class="name">com-stencil</div>
                    <div class="fontclass">.icon-com-stencil</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-info-maintain"></i>
                    <div class="name">info-maintain</div>
                    <div class="fontclass">.icon-info-maintain</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-de-flow"></i>
                    <div class="name">de-flow</div>
                    <div class="fontclass">.icon-de-flow</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-defect-rec"></i>
                    <div class="name">defect-rec</div>
                    <div class="fontclass">.icon-defect-rec</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sampling"></i>
                    <div class="name">sampling</div>
                    <div class="fontclass">.icon-sampling</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-compare"></i>
                    <div class="name">compare</div>
                    <div class="fontclass">.icon-compare</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-count"></i>
                    <div class="name">count</div>
                    <div class="fontclass">.icon-count</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-statistical-confirmation"></i>
                    <div class="name">statistical-confirmation</div>
                    <div class="fontclass">.icon-statistical-confirmation</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ranking"></i>
                    <div class="name">ranking </div>
                    <div class="fontclass">.icon-ranking</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-com-statistical"></i>
                    <div class="name">com-statistical</div>
                    <div class="fontclass">.icon-com-statistical</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-re-alteration"></i>
                    <div class="name">re-alteration</div>
                    <div class="fontclass">.icon-re-alteration</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-signal-anomaly"></i>
                    <div class="name">signal-anomaly</div>
                    <div class="fontclass">.icon-signal-anomaly</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-abnormal-switch"></i>
                    <div class="name">abnormal-switch</div>
                    <div class="fontclass">.icon-abnormal-switch</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-census"></i>
                    <div class="name">census</div>
                    <div class="fontclass">.icon-census</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-volume"></i>
                    <div class="name">volume</div>
                    <div class="fontclass">.icon-volume</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-abrogate"></i>
                    <div class="name">abrogate</div>
                    <div class="fontclass">.icon-abrogate</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-confirm"></i>
                    <div class="name">confirm</div>
                    <div class="fontclass">.icon-confirm</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-alarm-acknowledgement"></i>
                    <div class="name">alarm-acknowledgement</div>
                    <div class="fontclass">.icon-alarm-acknowledgement</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-factory"></i>
                    <div class="name">factory</div>
                    <div class="fontclass">.icon-factory</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-code"></i>
                    <div class="name">code</div>
                    <div class="fontclass">.icon-code</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-switch"></i>
                    <div class="name"> switch</div>
                    <div class="fontclass">.icon-switch</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-import"></i>
                    <div class="name">import</div>
                    <div class="fontclass">.icon-import</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-export"></i>
                    <div class="name">export</div>
                    <div class="fontclass">.icon-export</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-copy"></i>
                    <div class="name">copy</div>
                    <div class="fontclass">.icon-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-paste"></i>
                    <div class="name">paste</div>
                    <div class="fontclass">.icon-paste</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-follow"></i>
                    <div class="name">follow</div>
                    <div class="fontclass">.icon-follow</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-aquit"></i>
                    <div class="name">aquit</div>
                    <div class="fontclass">.icon-aquit</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-set-up"></i>
                    <div class="name">set-up</div>
                    <div class="fontclass">.icon-set-up</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-external-links"></i>
                    <div class="name">external-links</div>
                    <div class="fontclass">.icon-external-links</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-edit1"></i>
                    <div class="name">edit</div>
                    <div class="fontclass">.icon-edit1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-label"></i>
                    <div class="name">label</div>
                    <div class="fontclass">.icon-label</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pr-up"></i>
                    <div class="name">pr-up</div>
                    <div class="fontclass">.icon-pr-up</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pr-down"></i>
                    <div class="name">pr-down</div>
                    <div class="fontclass">.icon-pr-down</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shiftdown"></i>
                    <div class="name">shift down</div>
                    <div class="fontclass">.icon-shiftdown</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shiftup"></i>
                    <div class="name">shift up</div>
                    <div class="fontclass">.icon-shiftup</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-execute"></i>
                    <div class="name">execute</div>
                    <div class="fontclass">.icon-execute</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-insert"></i>
                    <div class="name">insert</div>
                    <div class="fontclass">.icon-insert</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-auditor"></i>
                    <div class="name">auditor</div>
                    <div class="fontclass">.icon-auditor</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gra-statistics"></i>
                    <div class="name">gra-statistics</div>
                    <div class="fontclass">.icon-gra-statistics</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-device"></i>
                    <div class="name">device</div>
                    <div class="fontclass">.icon-device</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ticket"></i>
                    <div class="name">ticket</div>
                    <div class="fontclass">.icon-ticket</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pr-device"></i>
                    <div class="name">pr-device</div>
                    <div class="fontclass">.icon-pr-device</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-seek"></i>
                    <div class="name">seek</div>
                    <div class="fontclass">.icon-seek</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-power"></i>
                    <div class="name">power</div>
                    <div class="fontclass">.icon-power</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-po-transformer"></i>
                    <div class="name">po-transformer</div>
                    <div class="fontclass">.icon-po-transformer</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-se-reactor"></i>
                    <div class="name">se-reactor</div>
                    <div class="fontclass">.icon-se-reactor</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cur-transformer"></i>
                    <div class="name">cur-transformer</div>
                    <div class="fontclass">.icon-cur-transformer</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ac-filter"></i>
                    <div class="name">ac-filter</div>
                    <div class="fontclass">.icon-ac-filter</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-se-capacitor"></i>
                    <div class="name">se-capacitor</div>
                    <div class="fontclass">.icon-se-capacitor</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sh-reactor"></i>
                    <div class="name">sh-reactor</div>
                    <div class="fontclass">.icon-sh-reactor</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-converter-station"></i>
                    <div class="name">converter-station</div>
                    <div class="fontclass">.icon-converter-station</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-svc"></i>
                    <div class="name">svc</div>
                    <div class="fontclass">.icon-svc</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-br-condenser"></i>
                    <div class="name">br-condenser</div>
                    <div class="fontclass">.icon-br-condenser</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-svg"></i>
                    <div class="name">svg</div>
                    <div class="fontclass">.icon-svg</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-multiple"></i>
                    <div class="name">multiple</div>
                    <div class="fontclass">.icon-multiple</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ins-framework"></i>
                    <div class="name">ins-framework</div>
                    <div class="fontclass">.icon-ins-framework</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-allocation"></i>
                    <div class="name">allocation</div>
                    <div class="fontclass">.icon-allocation</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-log"></i>
                    <div class="name">log</div>
                    <div class="fontclass">.icon-log</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-per-management"></i>
                    <div class="name">per-management</div>
                    <div class="fontclass">.icon-per-management</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pr-statistics"></i>
                    <div class="name">pr-statistics</div>
                    <div class="fontclass">.icon-pr-statistics</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pr-reset"></i>
                    <div class="name">pr-reset</div>
                    <div class="fontclass">.icon-pr-reset</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pr-stencil"></i>
                    <div class="name">pr-stencil</div>
                    <div class="fontclass">.icon-pr-stencil</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pr-confirm"></i>
                    <div class="name">pr-confirm</div>
                    <div class="fontclass">.icon-pr-confirm</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pr-flow"></i>
                    <div class="name">pr-flow</div>
                    <div class="fontclass">.icon-pr-flow</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-send"></i>
                    <div class="name">send</div>
                    <div class="fontclass">.icon-send</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-home"></i>
                    <div class="name">home</div>
                    <div class="fontclass">.icon-home</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-attachment"></i>
                    <div class="name">attachment</div>
                    <div class="fontclass">.icon-attachment</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-auditing"></i>
                    <div class="name">auditing</div>
                    <div class="fontclass">.icon-auditing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-inform"></i>
                    <div class="name">inform</div>
                    <div class="fontclass">.icon-inform</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-execute1"></i>
                    <div class="name">execute</div>
                    <div class="fontclass">.icon-execute1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pr-auditing"></i>
                    <div class="name">pr-auditing</div>
                    <div class="fontclass">.icon-pr-auditing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-notice"></i>
                    <div class="name">notice</div>
                    <div class="fontclass">.icon-notice</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-notify"></i>
                    <div class="name">notify</div>
                    <div class="fontclass">.icon-notify</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-per-information"></i>
                    <div class="name">per-information</div>
                    <div class="fontclass">.icon-per-information</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-label1"></i>
                    <div class="name">label</div>
                    <div class="fontclass">.icon-label1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-first-page"></i>
                    <div class="name">first-page</div>
                    <div class="fontclass">.icon-first-page</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-last-page"></i>
                    <div class="name">last-page</div>
                    <div class="fontclass">.icon-last-page</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-next-page-before"></i>
                    <div class="name">next-page-before</div>
                    <div class="fontclass">.icon-next-page-before</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-next-page"></i>
                    <div class="name">next-page</div>
                    <div class="fontclass">.icon-next-page</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ab-file"></i>
                    <div class="name">ab-file</div>
                    <div class="fontclass">.icon-ab-file</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-run"></i>
                    <div class="name">run</div>
                    <div class="fontclass">.icon-run</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bill"></i>
                    <div class="name">bill</div>
                    <div class="fontclass">.icon-bill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pr-bill"></i>
                    <div class="name">pr-bill</div>
                    <div class="fontclass">.icon-pr-bill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-view-log"></i>
                    <div class="name">view-log</div>
                    <div class="fontclass">.icon-view-log</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pr-switch"></i>
                    <div class="name">pr-switch</div>
                    <div class="fontclass">.icon-pr-switch</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ab-state"></i>
                    <div class="name">ab-state</div>
                    <div class="fontclass">.icon-ab-state</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-con-station"></i>
                    <div class="name">con-station</div>
                    <div class="fontclass">.icon-con-station</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-accumulator"></i>
                    <div class="name">accumulator</div>
                    <div class="fontclass">.icon-accumulator</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-landing"></i>
                    <div class="name">landing</div>
                    <div class="fontclass">.icon-landing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rail-battlefield"></i>
                    <div class="name">rail-battlefield</div>
                    <div class="fontclass">.icon-rail-battlefield</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-site"></i>
                    <div class="name">site</div>
                    <div class="fontclass">.icon-site</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-scs"></i>
                    <div class="name">scs</div>
                    <div class="fontclass">.icon-scs</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-generation"></i>
                    <div class="name">generation</div>
                    <div class="fontclass">.icon-generation</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dynamo"></i>
                    <div class="name">dynamo</div>
                    <div class="fontclass">.icon-dynamo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-nuclear-power"></i>
                    <div class="name">nuclear-power</div>
                    <div class="fontclass">.icon-nuclear-power</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-transformer"></i>
                    <div class="name">transformer</div>
                    <div class="fontclass">.icon-transformer</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-vortex"></i>
                    <div class="name">vortex</div>
                    <div class="fontclass">.icon-vortex</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wind-power"></i>
                    <div class="name">wind-power</div>
                    <div class="fontclass">.icon-wind-power</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-retract"></i>
                    <div class="name">retract</div>
                    <div class="fontclass">.icon-retract</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-spread"></i>
                    <div class="name">spread</div>
                    <div class="fontclass">.icon-spread</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weather"></i>
                    <div class="name">weather</div>
                    <div class="fontclass">.icon-weather</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
